<template>
    <div class="flex align-start">
        <div class="left">
            <div class="flex p-15">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-a-zu32"></use>
                </svg>
                <img style="width: 88px;margin-left: 10px" src="../../assets/img/12.png" alt="" />
            </div>
            <div class="mb-15">
                <el-scrollbar style="height:100%;width:100%">
                    <div class="zhong_cate">
                        <div class="item" v-for="item in categoryList" :key="item.cat_id"
                            :class="{ active: item.cat_id === activeId }" @click="changeCategory(item)">
                            {{ item.name }}
                        </div>
                    </div>
                </el-scrollbar>
            </div>
        </div>

        <div class="right">
            <div v-show="activeId <= 0">
                <el-row :gutter="20">
                    <el-col :span="14">
                        <el-carousel trigger="click" height="430px">
                            <el-carousel-item v-for="item in bannerList" :key="item.id">
                                <el-image :src="item.image" style="width: 100%; height: 100%;"></el-image>
                            </el-carousel-item>
                        </el-carousel>
                    </el-col>
                    <el-col :span="10">
                        <indexNews />
                    </el-col>
                </el-row>
            </div>
            <div v-show="activeId > 0">
                <div class="category_content" v-if="activeCategory.length > 0">
                    <div class="close" @click="activeId = 0">
                        <i class="el-icon-close"></i>
                    </div>
                    <div style="font-weight: 600; font-size: 18px; color: #ef312a;margin-top: 30px;margin-left: 30px;">
                        {{ activeCategory[0].name }}
                    </div>
                    <div class="box p-30">
                        <div class="catecy flex">
                            <div class="cy_list" v-for="item in activeCategoryChildren" :key="item.cat_id"
                                style="width: 48.5%">
                                <div class="hd-title">
                                    {{ item.name }}
                                </div>
                                <div class="items">
                                    <div class="item" v-for="rs in item.children" :key="rs.cat_id">
                                        <router-link :to="{ name: 'products', query: { cid: rs.cat_id } }">
                                            {{ rs.name }}
                                        </router-link>
                                    </div>
                                </div>
                            </div>
                            <div class="cy_list"
                                v-if="activeCategoryChildren.length <= 0"
                                style="width: 48.5%">
                                <div class="items">
                                    <div class="item">当前分类没有子分类</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import indexNews from './indexNews.vue'
import { getBanner, getCategoryList } from '@/api/apis'
export default {
    name: 'IndexCategory',
    components: {
        indexNews
    },
    data () {
        return {
            activeId: 0,
            activeCategory: [], // 当前选中的分类
            activeCategoryChildren: [], // 当前选中的分类的子分类
            category: [],
            bannerList: []
        }
    },
    computed: {
        ...mapGetters(['categoryList', 'VUEX_sanCatList']),
    },
    mounted() {
        this.getBannerData()
        //this.getCategoryListData()
    },
    methods: {
        changeCategory (item) {
            if (item.cat_id === this.activeId){
                this.activeId = 0;
            } else {
                this.activeCategory = [item];
                if (item.children && item.children.length > 0) {
                    this.activeCategoryChildren = item.children;
                } else {
                    this.activeCategoryChildren = [];
                }
                this.activeId = item.cat_id;
            }
        },
        getBannerData(){
            getBanner().then(res => {
                if (res.code === 1) {
                    this.bannerList = res.data
                }
            })
        },
        // 获取焦点图
        getCarousel () {
            let that = this
            getNewsList({ type: 4 }).then(res => {
                if (res.code === 1) {
                    that.carouselList = res.data.data
                } else {
                    this.$message.error(res.msg)
                }
            })
        },
        getCategoryListData(){
            getCategoryList().then(res => {
                if (res.code === 1) {
                    this.category = res.data
                }
            })
        }
    },
}
</script>

<style scoped lang="less">
.left {
    width: 15%;
    height: 430px;
    background-color: #ffffff;
    border-radius: 10px;
    .icon {
        width: 30px;
        height: 30px;
    }
}

.right {
    flex: 1;
    margin-left: 15px;

    .category_content {
        position: relative;
        background: #ffffff;
        border-radius: 10px;
        border: 1px solid #ef312a;
        .close {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 20px;
            color: #2e3033;
            cursor: pointer;
            transition: all 0.3s ease-in-out;
            &:hover {
                color:#ef312a;
                transform: rotate(90deg);
            }
        }
        .box {
            height: 630px;
            overflow-y: auto;
            .catecy {
                width: 100%;
                flex-wrap: wrap;
                justify-content: space-between;
                .cy_list {
                    .hd-title {
                        font-weight: 500;
                        font-size: 16px;
                        color: #2e3033;
                        padding: 15px 0;
                        border-bottom: 2px solid #ef312a;
                    }
        
                    .items {
                        display: flex;
                        flex-wrap: wrap;
        
                        .item {
                            font-weight: 400;
                            font-size: 14px;
                            color: #2e3033;
                            padding-right: 15px;
                            padding-top: 15px;
                            a {
                                color: #2e3033;
                                text-decoration: none;
                                transition: all 0.3s ease-in-out;
                                &:hover {
                                    color: #ef312a;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

.hd-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}


.zhong_cate {
    height: 370px;
    .item {
        background: #fff;
        padding: 10px 0 10px 30px;
        margin: 10px 0;
        font-weight: normal;
        font-size: 16px;
        color: #2e3033;
        border-radius: 4px;
        cursor: pointer;

        &:hover {
            color: #ef312a;
            background-color: #f9fafc;
        }

        &.active {
            color: #ef312a;
            background: rgba(239, 49, 42, 0.2);
        }
    }
}

.el-carousel {
    border-radius: 10px;

    /deep/.is-active {
        .el-carousel__button {
            background-color: #ef312a;
        }
    }

    .el-carousel__container {
        .el-carousel__item {
            img {
                width: 100%;
                height: 100%;
            }
        }
    }
}
</style>